<template>
  <div class="mainContainer">
    <div class="radio-box">
      <video id="video-contianer" class="radio-radio" autoplay muted></video>
    </div>
    <div class="huazhonghua" @click="zoom"></div>
    <div class="shangyige" @click="addthePrevious"></div>
    <div class="xiayige" @click="addNext"></div>
  </div>
</template>
<script setup>
import flvjs from "flv.js"
import { onMounted, ref, onUnmounted } from "vue"

const flvPlayer = ref()

onMounted(() => {
  console.log("isSupported: " + flvjs.isSupported())
  console.log("是否支持点播视频：" + flvjs.getFeatureList().mseFlvPlayback)
  console.log(
    "是否支持httpflv直播流：" + flvjs.getFeatureList().mseLiveFlvPlayback
  )
  initFlv()
})

/**
 * 创建 flvjs 实例
 */
const initFlv = () => {
  const ele = document.getElementById("video-contianer")
  flvPlayer.value = flvjs.createPlayer({
    type: "flv", // 指定视频类型
    isLive: true, // 开启直播
    hasAudio: false, // 关闭声音
    cors: true, // 开启跨域访问
    url: "ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:36001/cam/realmonitor?channel=17&subtype=1" // 指定流链接
  })
  // 将flvjs对象和DOM对象绑定
  flvPlayer.value.attachMediaElement(ele)
  play()
  flvEvent()
}

const play = () => {
  flvPlayer.value.load()
  flvPlayer.value.play()
}

// flvjs播放器事件侦听
const flvEvent = () => {
  // 视频错误信息回调
  flvPlayer.value.on(
    flvjs.Events.ERROR,
    (errorType, errorDetail, errorInfo) => {
      // console.log(
      //   "类型:" + JSON.stringify(errorType),
      //   "报错内容" + errorDetail,
      //   "报错信息" + errorInfo
      // )
    }
  )
  //【重要事件监听】http 请求建立好后，该事件会一直监听 flvjs 实例
  flvPlayer.value.on(
    flvjs.Events.STATISTICS_INFO,
    (errorType, errorDetail, errorInfo) => {
      // console.log(
      //   "类型:" + JSON.stringify(errorType),
      //   "报错内容" + errorDetail,
      //   "报错信息" + errorInfo
      // )
    }
  )
}

const destory = () => {
  flvPlayer.value.pause()
  flvPlayer.value.unload()
  flvPlayer.value.detachMediaElement()
  flvPlayer.value.destroy()
  flvPlayer.value = null
}

/**
 * 缩放
 */
const zoom = () => {
  if (!!isFullscreen()) exitFullScreen()
  else requestFullScreen()
}

const isFullscreen = () => {
  const documentScreenElement = document
  return (
    documentScreenElement.fullscreenElement ||
    documentScreenElement.msFullscreenElement ||
    documentScreenElement.mozFullScreenElement ||
    documentScreenElement.webkitFullscreenElement ||
    false
  )
}
const requestFullScreen = () => {
  let documentRequestScreenElement = null
  documentRequestScreenElement = document.getElementById("video-contianer")

  var requestMethod =
    documentRequestScreenElement.requestFullScreen ||
    documentRequestScreenElement.webkitRequestFullScreen ||
    documentRequestScreenElement.mozRequestFullScreen ||
    documentRequestScreenElement.msRequestFullScreen
  if (requestMethod) {
    requestMethod.call(documentRequestScreenElement)
  }
}

const exitFullScreen = () => {
  const documentFullScreenElement =
    documentFullScreenElement.mozCancelFullScreen()
  documentFullScreenElement.webkitExitFullscreen()
  documentFullScreenElement.msExitFullscreen()

  var exitMethod =
    documentFullScreenElement.exitFullscreen ||
    documentFullScreenElement.mozCancelFullScreen ||
    documentFullScreenElement.webkitExitFullscreen ||
    documentFullScreenElement.msExitFullscreen
  if (exitMethod) {
    exitMethod.call(documentFullScreenElement)
  }
}
// 点击了上一个
const addthePrevious = () => {
  console.log("上一个")
}
// 点击了下一个
const addNext = () => {
  console.log("下一个")
}

onUnmounted(() => {
  destory()
})
</script>
<style lang="less" scoped>
.mainContainer {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  .radio-box {
    position: absolute;
    top: 7%;
    left: 4.5%;
    width: 91%;
    height: 87%;
  }
  .radio-radio {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .huazhonghua {
    cursor: pointer;
    position: absolute;
    right: 5%;
    top: 15%;
    width: 7%;
    height: 10%;
    background: url("@/assets/home/huazhonghua.png") no-repeat center;
    background-size: 100% 100%;
  }
  .xiayige {
    cursor: pointer;
    position: absolute;
    right: 5%;
    top: 80%;
    width: 10%;
    height: 10%;
    background: url("@/assets/home/anniu_zhankai.png") no-repeat center;
    background-size: 100% 100%;
  }
  .shangyige {
    cursor: pointer;
    position: absolute;
    left: 6%;
    top: 80%;
    width: 10%;
    height: 10%;
    background: url("@/assets/home/anniu_shouqi.png") no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
